<template>
  <transition name="el-zoom-in-center">
    <div class="JADP-preview-main">
      <div class="JADP-common-page-header">
        <el-page-header @back="goBack" :content="subjectName"> </el-page-header>
        <div class="options">
          <el-button @click="goBack">取 消</el-button>
        </div>
      </div>
      <div class="JADP-common-layout-main JADP-flex-main">
        <el-row class="JADP-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
            <el-col :span="6">
              <el-form-item label="题目类型">
                <el-select
                  v-model="query.topictype"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="(item, index) in getDict('topictype')"
                    :key="index"
                    :label="item.dataName"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目难度">
                <el-select
                  v-model="query.difficultion"
                  placeholder=""
                  clearable
                >
                  <el-option
                    v-for="(item, index) in getDict('difficultion')"
                    :key="index"
                    :label="item.dataName"
                    :value="item.id"
                    :disabled="item.disabled"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="题目名称">
                <el-input v-model="query.stem" placeholder="请输入" clearable>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="search()"
                  >查询</el-button
                >
                <el-button icon="el-icon-refresh-right" @click="reset()"
                  >重置</el-button
                >
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div class="JADP-common-head">
          <div>
            <el-dropdown>
              <el-button type="primary" style="margin-left:10px;">
                单个录入<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  icon="el-icon-plus"
                  @click.native="
                    addOrUpdateHandle('7280c24ba6bf410997c739637706e7e6')
                  "
                  >单选题</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-circle-plus"
                  @click.native="
                    addOrUpdateHandle('1d3f7e7e22c94e49ba95f52e3ec9e3af')
                  "
                  >多选题</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-circle-plus-outline"
                  @click.native="
                    addOrUpdateHandle('f0b4073bc9ad4426b87cbc70d4526cf6')
                  "
                  >填空题</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-check"
                  @click.native="
                    addOrUpdateHandle('ee505074164e4d0bb54e4a5136b123fb')
                  "
                  >判断题</el-dropdown-item
                >
                <el-dropdown-item
                  icon="el-icon-circle-check"
                  @click.native="
                    addOrUpdateHandle('07ba1e3b779b4e1db3c1318d0f80a688')
                  "
                  >简答题</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
            <el-checkbox
              v-model="checked1"
              label="全选"
              border
              style="margin-left:10px; transform: translateY(-1px)"
            ></el-checkbox>

            <el-button style="margin-left:10px" @click="setOpenFlag">{{
              openFlag ? "收起题目" : "展开题目"
            }}</el-button>
            <el-button
              type="text"
              icon="el-icon-download"
              style="margin-left:10px"
              @click="leadingIn"
              >导入</el-button
            >

            <el-button type="text" icon="el-icon-upload2" @click="exportSubject"
              >导出
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              @click="handleBatchRemoveDel()"
              >批量删除
            </el-button>
          </div>
        </div>

        <div class="JADP-common-main">
          <div class="mysubject" v-for="(item, index) in list" :key="item.id">
            <div class="subject_title">
              <input
                type="checkbox"
                v-model="checkboxList"
                class="checkbox"
                :value="item.id"
              />
              &nbsp;
              <span class="font">
                {{ index + 1 }}、[{{
                  getDict("topictype", item.topictype)
                }}]</span
              >
              [难度系数：{{ getDict("difficultion", item.difficultion) }}]
              <ul class="title_right">
                <li @click="$set(item, 'openFlag', !item.openFlag)">
                  {{ item.openFlag ? "收起" : "展开" }}
                </li>
                <li @click="addOrUpdateHandle(item.topictype, item.id)">
                  编辑
                </li>
                <li @click="handleDel(item.id)">删除</li>
              </ul>
            </div>
            <div class="subject_body">
              <div v-html="item.stem"></div>
              <!--单选题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === '7280c24ba6bf410997c739637706e7e6'"
              >
                <el-radio-group disabled v-model="item.result">
                  <ul>
                    <li v-for="(val, inx) in item.optionsum" :key="inx">
                      <el-radio :label="val.id"
                        >{{ val.label }}、{{ val.value }}</el-radio
                      >
                    </li>
                  </ul>
                </el-radio-group>
                <div>
                  <el-row>
                    <el-col :span="1">解析：</el-col>
                    <el-col :span="22">
                      <div v-html="item.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!--多选题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === '1d3f7e7e22c94e49ba95f52e3ec9e3af'"
              >
                <el-checkbox-group disabled v-model="item.result">
                  <ul>
                    <li v-for="(val, inx) in item.optionsum" :key="inx">
                      <!-- <el-radio :label="val.id">{{ val.value }}</el-radio> -->
                      <el-checkbox :label="val.id"
                        >{{ val.label }}、{{ val.value }}</el-checkbox
                      >
                    </li>
                  </ul>
                </el-checkbox-group>
                <div>
                  <el-row>
                    <el-col :span="1">解析：</el-col>
                    <el-col :span="22">
                      <div v-html="item.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!--填空题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === 'f0b4073bc9ad4426b87cbc70d4526cf6'"
              >
                <div style="margin:20px 0">
                  答案：
                  <span
                    v-for="(val, inx) in item.optionsum"
                    :key="inx"
                    style="margin-right:10px"
                  >
                    <!-- <el-radio :label="val.id">{{ val.value }}</el-radio> -->
                    {{ val.value }};
                  </span>
                </div>
                <div>
                  <el-row>
                    <el-col :span="1">解析：</el-col>
                    <el-col :span="22">
                      <div v-html="item.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!--判断题  -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === 'ee505074164e4d0bb54e4a5136b123fb'"
              >
                <div style="margin:20px 0">
                  答案：
                  <el-radio-group disabled v-model="item.result">
                    <el-radio label="正确"></el-radio>
                    <el-radio label="错误"></el-radio>
                  </el-radio-group>
                </div>
                <div>
                  <el-row>
                    <el-col :span="1">解析：</el-col>
                    <el-col :span="22">
                      <div v-html="item.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <!-- 简单题 -->
              <div
                v-show="item.openFlag"
                v-if="item.topictype === '07ba1e3b779b4e1db3c1318d0f80a688'"
              >
                <div style="margin:20px 0">
                  答案：
                  <p v-html="item.result"></p>
                </div>
                <div>
                  <el-row>
                    <el-col :span="1">解析：</el-col>
                    <el-col :span="22">
                      <div v-html="item.answeranalysis"></div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </div>
        </div>

        <pagination
          :total="total"
          :page.sync="listQuery.currentPage"
          :limit.sync="listQuery.pageSize"
          @pagination="initData"
        />
      </div>
      <AddSubjectForm
        v-if="addSubjectFormVisible"
        ref="addSubjectForm"
        @refresh="refresh"
        :tkid="tkid"
      />
      <el-dialog
        title="导入题目"
        :close-on-click-modal="false"
        :visible.sync="visible"
        lock-scroll
        width="800px"
        append-to-body
        v-if="visible"
      >
        <div class="dialog-body">
          <div class="subtitle">
            <i class="el-icon-info"></i>
            <span>上传前请先下载模板，按照模板要求将内容录入到模板中。</span>
          </div>
          <div style="padding:16px">
            <el-button
              type="success"
              plain
              icon="el-icon-download"
              @click="downloadTemplate"
              >下载模板</el-button
            >
          </div>
          <div>
            <el-upload
              class="upload-demo"
              drag
              :action="baseUrl + tkid+'/'+$store.getters.organizeId"
              :headers="{ Authorization: $store.getters.token }"
              @on-success="onSuccess"
              :on-success="onSuccess"
              accept=".xlsx, .xls"
              :on-error="onError"
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
              </div>
            </el-upload>
          </div>
          <div class="explain">
            <h5>说明</h5>
            1.建议使用新版office或WPS软件编辑题目文件，仅支持上传.xlsx格式的文件
            <br />
            2.题目数量过多、题目文件过大（如图片较多）等情况建议分批导入 <br />
            3.需严格按照各题型格式要求编辑题目文件<br />
            4.批量导入无法识别excel内的样式，统一为默认样式
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">关 闭</el-button>
        </span>
      </el-dialog>
    </div>
  </transition>
</template>
<script>
import request from "@/utils/request";
import AddSubjectForm from "./addSubjectForm.vue";
export default {
  name: "subject",
  components: {
    AddSubjectForm
  },
  data() {
    return {
      subjectName: "",
      checkboxList: [], // 题目多选框
      radio: 3, // 默认选中的单选框
      listLoading: false,
      query: {
        topictype: undefined,
        difficultion: undefined,
        stem: undefined
      },
      tkid: undefined,
      visible: false,
      list: [],
      total: 0,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      },
      addSubjectFormVisible: false,
      openFlag: false,
      baseUrl: `${
        this.define.comUrl
      }/v3/api/testPaperManage/Xy_ks_examination_paper/importData/false/`
    };
  },
  computed: {
    checked1: {
      get() {
        if (!this.checkboxList.length) return false;
        return this.checkboxList.length === this.list.length;
      },
      set(val) {
        if (val) {
          this.checkboxList = this.list.map(item => item.id);
        } else {
          this.checkboxList = [];
        }
      }
    }
  },
  methods: {
    goBack() {
      this.$emit("refresh", true);
    },
    //展开全部题目
    setOpenFlag() {
      this.openFlag = !this.openFlag;
      this.list.forEach(item => {
        item.openFlag = this.openFlag;
      });
    },
    refresh(isrRefresh) {
      this.addSubjectFormVisible = false;
      if (isrRefresh) this.reset();
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        tkid: this.tkid,
        organizeId:this.$store.getters.organizeId
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/api/subject/Xy_ks_subject`,
        method: "get",
        data: query
      }).then(res => {
        console.log(res);
        this.list = res.data.list;
        this.list.forEach(item => {
          item.openFlag = false;
          // 判断不等于简答题，不等于判断题
          if (
            item.topictype !== "07ba1e3b779b4e1db3c1318d0f80a688" &&
            item.topictype !== "ee505074164e4d0bb54e4a5136b123fb"
          ) {
            item.result = JSON.parse(item.result);
            item.optionsum = JSON.parse(item.optionsum);
          }
        });

        this.list = JSON.parse(JSON.stringify(this.list));
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    addOrUpdateHandle(subjectName, id, isDetail) {
      this.addSubjectFormVisible = true;
      this.$nextTick(() => {
        this.$refs.addSubjectForm.init(subjectName, id, isDetail);
      });
    },
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    // 删除
    handleDel(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: `/api/subject/Xy_ks_subject/${id}`,
            method: "DELETE"
          }).then(res => {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.initData();
          });
        })
        .catch(() => {});
    },
    //批量删除
    handleBatchRemoveDel() {
      if (!this.checkboxList.length) {
        this.$message({
          type: "error",
          message: "请选择一条数据",
          duration: 1500
        });
        return;
      }
      const ids = this.checkboxList.join();
      this.$confirm("您确定要删除这些数据吗, 是否继续？", "提示", {
        type: "warning"
      })
        .then(() => {
          request({
            url: `/api/subject/Xy_ks_subject/batchRemove/${ids}`,
            method: "DELETE"
          }).then(res => {
            this.$message({
              type: "success",
              message: res.msg
            });
            this.initData();
          });
        })
        .catch(() => {});
    },

    // 导入
    leadingIn() {
      this.visible = true;
    },
    //导出题目
    exportSubject() {
      window.location.href =
        this.define.comUrl +
        "/v3/api/testPaperManage/Xy_ks_examination_paper/Actions/Export/" +
        this.tkid+"/"+this.$store.getters.organizeId;
    },
    // 下载模板
    downloadTemplate() {
      window.location.href =
        this.define.comUrl +
        "/v3/api/testPaperManage/Xy_ks_examination_paper/templateDownload";
    },
    // 文件上传成功时的钩子
    onSuccess() {
      this.$message.success("文件导入成功");
      this.visible = false;
      this.initData();
    },
    //文件上传失败的钩子
    onError() {
      this.$message.error("文件上传失败，请仔细检查文件格式是否正确");
    }
  }
};
</script>
<style scoped lang="scss">
li {
  list-style: none;
}
.JADP-common-main {
  padding: 10px 100px;
  min-height: 60vh;
  .mysubject {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    &:hover {
      border: 1px #3f3fff dashed;
    }
    .subject_title {
      width: 1400px;
      .checkbox {
        cursor: pointer;
      }
      .font {
        font-size: 18px;
        font-weight: 600;
      }
      .title_right {
        float: right;
        display: flex;
        border: 1px solid #dfe2e8;
        overflow: hidden;
        border-radius: 5px;
        li {
          padding: 7px 15px;
          border-right: 1px solid #dfe2e8;
          cursor: pointer;
          &:hover {
            background: #ecf5ff;
            color: #409eff;
          }
          &:last-child {
            border-right: none;
          }
        }
      }
    }
    .subject_body {
      width: 1400px;
      margin-top: 20px;
      margin-left: 25px;
      line-height: 22px;
      ul {
        margin-top: 20px;
        li {
          line-height: 30px;
          >>> .el-radio__label {
            font-size: 16px;
          }
        }
      }
    }
  }
}
.dialog-body {
  text-align: center;
  .explain {
    margin-top: 10px;
    padding: 10px 20px;
    text-align: left;
    background-color: rgb(244, 244, 245);
    color: rgb(144, 147, 153);
    line-height: 1.4;
  }
}
>>> .el-dialog__header {
  border-bottom: 1px solid #dcdcdc;
}
>>> .el-upload-list__item {
  text-align: left;
}
</style>
